<template>
  <div class="screenSelect" :class="isActive ? 'is-active_ch' : ''" v-if="position == 'left'">
    <div class="slot_con" v-if="title">{{ title }}</div>
    <el-select name="select" v-if="type == 'select'" v-model="value" :style="'width:' + width + ';'" filterable
      :placeholder="placeholder" @visible-change="visChange" @change="setValue" popper-class="selectCh">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-input v-if="type == 'input'" :placeholder="placeholder" v-model="value" clearable
      :style="'width:' + width + ';'" @focus="isActive = true" @blur="isActive = false" @change="setValue">
      <!-- <i slot="suffix" class="el-icon-circle-close"></i> -->
    </el-input>
    <el-input v-if="type == 'inputnumber'" type="number" @input="handleInput" :placeholder="placeholder" v-model="value" clearable @focus="isActive = true"
      @blur="isActive = false" @change="setValue" class="no-number">
      <!-- <i slot="suffix" class="el-icon-circle-close"></i> -->
    </el-input>
    <el-date-picker v-if="type == 'daterange'" class="daterange" v-model="value" :style="'width:' + width + ';'"
      type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="setValue">
    </el-date-picker>
    <el-date-picker v-model="value" v-if="type == 'daterangemr'" type="date" placeholder="选择日期" class="daterangemr"
      :style="'width:' + width + ';'" @change="setValue">
    </el-date-picker>
  </div>
  <div class="screenSelectTop mb10" :class="title == ' ' ? 'screenSelectTopT' : (isBorder ? 'bord' : '')"
    v-else-if="position = 'top'" :style="'width:' + width + ';'">
    <div class="slot_con" v-if="title">{{ title }}</div>
    <el-select name="select" v-if="type == 'select'" v-model="value" filterable :disabled="disabled"
      :placeholder="placeholder" @visible-change="visChange" @change="setValue" popper-class="selectCh">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <el-input v-if="type == 'input'" :placeholder="placeholder" v-model="value" clearable @focus="isActive = true"
      @blur="isActive = false" @change="setValue">
      <!-- <i slot="suffix" class="el-icon-circle-close"></i> -->
    </el-input>
    <el-input v-if="type == 'inputnumber'" type="number" @input="handleInput" :placeholder="placeholder" v-model="value" clearable @focus="isActive = true"
      @blur="isActive = false" @change="setValue" class="no-number">
      <!-- <i slot="suffix" class="el-icon-circle-close"></i> -->
    </el-input>
    <el-date-picker v-if="type == 'daterange'" class="daterange" v-model="value" :style="'width:' + width + ';'"
      type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="setValue">
    </el-date-picker>
    <el-date-picker v-model="value" v-if="type == 'daterangemr'" type="date" placeholder="选择日期" class="daterangemr"
      :style="'width:' + width + ';'" @change="setValue">
    </el-date-picker>
    <el-input v-if="type == 'textarea'" type='textarea' :rows="rows" :placeholder="placeholder" v-model="value"
      clearable @focus="isActive = true" @blur="isActive = false" @change="setValue">
    </el-input>
  </div>
</template>

<script>
import { set } from 'nprogress'

export default {
  components: {},
  name: 'screenSelect',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    title: {
      type: String
    },
    type: {
      type: String,
      default: 'input'
    },
    width: {
      type: String,
      default: '100%'
    },
    placeholder: {
      type: String,
      default: ''
    },
    options: {
    },
    isValue: {
    },
    position: {
      type: String,
      default: 'left'
    },
    rows: {
      type: Number,
      default: 2
    },
    isBorder: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isValue: {
      handler(ne, ol) {
        this.value = ne
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      isActive: false,
      value: ''
    }
  },

  methods: {
    visChange(e) {
      this.isActive = e
    },
    handleInput(){
      this.value = this.value.replace(/^(0+)|[^\d]+/g,'');
    },
    setValue: function () {
      this.$emit('transfer', this.value)
    }
  }
}
</script>

<style lang="scss">
.screenSelect {
  max-width: 420px;
  // width: 233px;
  font-size: 13px;
  font-weight: 400;
  height: 32px;
  display: flex;
  border: 1px solid #EBEBEB;
  align-items: center;
  overflow: hidden;
  margin-right: 15px;
  border-radius: 6px;
}

.is-active_ch {
  border: 1px solid #0584FE;
}

::v-deep .el-input__inner {
  height: 32px !important;
  border-radius: 0;
  border: none;
}

// .el-input {
//   width: auto;
// }

.el-select {
  height: 32px;
  width: 100%;
}

.slot_con {
  white-space: nowrap;
  // min-width: 87px;
  padding: 7px 11px 7px 17px;
  background-color: #E6E6E754;
  color: #000;
}

.screenSelectTop {
  // height: 58px;
  margin-right: 34px;
}

.screenSelectTopT {
  display: flex;
  align-items: flex-end;
}

.screenSelectTop .el-input__inner {
  height: 32px;
  font-size: 13px;
  padding-left: 8px;
  color: #000;
}

.screenSelectTop .slot_con {
  background: none;
  padding: 0 0 6px 0;
  font-size: 15px;
  font-weight: 400;
  color: #606266;
}

.screenSelectTop .el-textarea__inner {
  font-size: 13px;
  font-weight: 400;
  padding-left: 8px;
  font-family: PingFang SC;
}

.selectCh {
  margin: 0 !important;
  border-radius: 0;
  padding: 0px 6px !important;
}

.screenSelect .el-select__caret.el-input__icon::before,
.screenSelectTop .el-select__caret.el-input__icon::before {
  content: '';
  background: url(../../assets/iconfont/Vector.png); //自定义图片
  position: absolute;
  background-size: 22px 17px;
  width: 22px; //图片宽
  height: 17px; //图片高
  transform: rotate(180deg);
}

.selectCh .el-select-dropdown__item.selected {
  color: #FFFFFF;
  background-color: #0584FE;
  font-weight: 500;
}

.selectCh .popper__arrow,
.el-picker-panel.el-date-range-picker.el-popper .popper__arrow {
  display: none !important;
}

.el-picker-panel.el-date-range-picker {
  margin: 0;
}

.screenSelect .popper__arrow::after {
  content: none !important;
}

.screenSelect .el-input__icon:after {
  content: none !important;
}

.screenSelect .el-select .el-input.is-focus .el-input__inner,
.screenSelect .el-input__inner {
  border: none;
  height: 32px;
}

.screenSelect .el-select__caret.el-input__icon.el-icon-arrow-up.is-reverse,
.screenSelect .el-select__caret.el-input__icon.el-icon-arrow-up,
.screenSelectTop .el-select__caret.el-input__icon.el-icon-arrow-up.is-reverse,
.screenSelectTop .el-select__caret.el-input__icon.el-icon-arrow-up {
  display: flex;
  align-items: center;
  justify-content: center;
}

.screenSelect .el-select .el-input__inner:focus {
  border: none;
}

.screenSelect .el-input--medium .el-input__inner {
  height: 32px;
}

.bord .el-input__inner {
  border: 1px solid red !important;
}
.daterangemr .el-input__inner{
  padding-left: 30px;
}
/*在Chrome下移除input[number]的上下箭头*/
.no-number::-webkit-outer-spin-button,
.no-number::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
 
.no-number input[type="number"]::-webkit-outer-spin-button,
.no-number input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none !important;
}
 
/*在firefox下移除input[number]的上下箭头*/
.no-number {
  -moz-appearance: textfield;
}
 
.no-number input[type="number"] {
  -moz-appearance: textfield;
}
</style>
